<template>
  <div class="mr-root">
    <back-header>
      <p class="title">
        {{$route.params.gameName}}
      </p>
    </back-header>
    <div class="mr-content">
      <game-room v-for="(r,index) in roomList" :roomss="r" :key="index"></game-room>
    </div>
  </div>
</template>
<script>
  import BackHeader from "../components/BackHeader"
  import GameRoom from '../components/GameRoom'
  export default {
    data() {
      return {
        roomList: []
      }
    },
    components: {
      BackHeader,
      GameRoom
    },
    created() {
      this.axios.get(`/douyuapi/RoomApi/live/${this.$route.params.gameId}?offset=0&limit=20`)
        .then(data => {
          this.roomList = this.roomList.concat(data.data.data)
          //  console.log(data)
        })
        .catch(err => {

        })

    }
  }

</script>
<style scoped>
  .room-infor {
    margin-top: 20px;
    overflow: hidden;
  }
  
  .room-infor img {
    float: left;
    width: 4rem;
  }
  
  .room-infor .room-title {
    float: left;
    margin-left: 20px;
  }

</style>
